<template>
  <div>
    <div class="back"></div>
    <div class="infor"
         @click="back(index)"
         v-for="(item,index) in sh"
         :key="index">
      <div class="i_1">
        <div class="name">{{sh[index][0]}}</div>
        <div class="answer">{{sh[index][1]}}</div>
        <div class="tel">{{sh[index][2]}}</div>
        <div class="tell">{{sh[index][3]}}</div>
      </div>
      <div class="i_2">
        <span class="other">{{sh[index][4]}}</span>
        <div class="detail">{{sh[index][5]}}</div>
      </div>

    </div>
    <div @click="to"
         class="footer">
      <div class="add">+</div><span class="new">新增收货地址</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Add',
  data () {
    return {
      sh: ''
    }
  },
  methods: {
    back (index) {
     
      //localStorage.setItem('xinxi', this.sh[index])
       localStorage.setItem('xinxi',JSON.stringify(this.sh[index]))
      this.$router.push({ name: 'Order' })

    },
    to () {
      this.$router.push({ name: 'Address' })
    },

  },
  created () {
    var sh = this.$store.state.shouhuo;
    this.sh = sh
    // console.log(this.sh)
  }
}
</script>

<style scoped>
.infor {
  padding: 30px 50px;
  border-bottom: 1px solid #666;
}
.i_2 {
  margin-top: 5px;
}
.i_1,
.i_2 {
  display: flex;
  align-items: center;
}
.detail {
  color: #777;
  font-size: 16px;
  margin-left: 10px;
}
.other {
  background: red;
  border-radius: 5px;
  padding: 0 4px;
  color: white;
}
.tell {
  font-size: 18px;
  color: #ccc;
  margin-left: 10px;
}
.answer,
.tel {
  font-size: 18px;
  font-weight: 400;
  margin-left: 10px;
}
.name {
  font-weight: 700;
  font-size: 20px;
}
.new {
  margin-left: 8px;
  color: #3190e8;
  font-size: 18px;
}
.add {
  width: 22px;
  height: 22px;
  border: 1px solid blue;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 23px;
  color: #ccc;
  font-weight: 600;
}
.footer {
  display: flex;
  justify-content: center;
  height: 64.7px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>